<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>JSMXML POC</title>
		<link rel="stylesheet" href="/jsmxml/samples/style/default/default.css" type="text/css" />
		<script src="/jsmxml/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
		<script src="/jsmxml/lib/jsmxml/jsmxml-0.1.js" type="text/javascript"></script>
	</head>
	<body>
		<script id="mainApplication" type="application/jsmxml" >
			<jsmxml>
				var appName = "jsmxmlTester";
				var sayThis = function(msg){
					log(msg);
				};
				
				
				var app = {};
					app.resizeImage = function(inc){
						var img = $("#myImage");
						var nextWidth = img.width() + (img.width() * .2 * inc);
						var nextHeight = img.height() +(img.height() * .2 * inc);
							img.animate(
							{
								width:nextWidth,
								height: nextHeight
							});
					};
					
					app.plus = function(){
						this.resizeImage(1);
					};
					
					app.minus = function(){
						this.resizeImage(-1);
					};
					
					app.reset = function(){
						$("#myImage").animate(
							{
								width:187,
								height: 125
							});
					};
				
				var getDate = function(){
					var now = (new Date()).toString();
					document.getElementById("output").value = now;
				};
				
			</jsmxml>
			<Button label="Hello jsMXML" width="80" height="24" click="sayThis('hello raul')" />
			<Button label="Bye jsMXML" width="80" height="24" click="sayThis(456)" />
			<Canvas id="main" width="420" height="320">
				<Text width="320" text="This string contains a less than, &lt;, greater than, &gt;, ampersand, &amp;, apostrophe, ', and quotation mark &quot;."/>
				<Button label="GET CURRENT DATE" width="80" height="24" click="getDate()" />
				<TextField width="320" height="20" id="output"/>
				<Canvas width="200" height="32">
					<Text text="Scale image:" />
					<Button label="[-]" click="app.minus()" />
					<Button label="[+]" click="app.plus()" />
					<Button label="Reset" click="app.reset()" />
				</Canvas>
				<!-- 
				<mx:Resize id="expand" target="{myImage}" widthTo="100" heightTo="200" 
			        duration="10000" 
			        tweenUpdate="tweenUpdateHandler(event);" 
			        tweenEnd="tweenUpdateHandler(event);"/>
				-->
				<Image id="myImage" width="187" height="125" source="/jsmxml/samples/nokia-97-vodafone.png" />
			</Canvas>
		</script>
	</body>
</html>
